import { defineStore } from "pinia";
import { ref } from "vue";
import { FontType } from "@/typings";

const useSystemStore = defineStore(
  "systemStore",
  () => {
    // 菜单是否收缩
    const isCollapse = ref<boolean>(false);
    const settingFont = ref<string>(window.sessionStorage.getItem("FONT") || "DaoLiTi"); // 默认字体为 DaoLiTi
    const settingSize = ref<string>(window.sessionStorage.getItem("SIZE") || "18"); // 默认系统尺寸大小为 18px，html 元素 fontSize

    // 修改菜单收缩
    const setCollapse = (collapse: boolean) => {
      isCollapse.value = collapse;
    };

    // 设置字体，默认字体为 DaoLiTi
    const setFont = (font: FontType = "DaoLiTi") => {
      settingFont.value = font;
      window.sessionStorage.setItem("FONT", font);
      const fontLink = document.getElementById("font"); // index.html 页面的 link 元素
      fontLink?.setAttribute("href", `./font/${font}/index.css`);
    };

    // 初始化字体包
    const initFont = () => {
      setFont(settingFont.value as FontType);
    };

    // 设置系统尺寸大小，默认设置 html 的 fontSize 为 18px
    const setSize = (size: string = "18") => {
      settingSize.value = size;
      window.sessionStorage.setItem("SIZE", size);
      const HTML = document.getElementsByTagName("html")[0];
      HTML.style.fontSize = size + "px";
    };

    // 初始化系统尺寸
    const initSize = () => {
      setSize(settingSize.value as string);
    };

    return {
      isCollapse,
      setCollapse,
      settingFont,
      setFont,
      initFont,
      settingSize,
      setSize,
      initSize,
    };
  },
  {
    persist: {
      enabled: true,

      strategies: [
        {
          storage: sessionStorage,
          paths: ["isCollapse"],
        },
      ],
    },
  } as any
);

export default useSystemStore;
